<template>
  <div class="container">
    <!--<iframe src="http://200.0.0.5:9999/ieta/sys/role.html" frameborder="0"></iframe>-->
    <div class="newlayout" style="margin-top: 20px">
      <el-button type="primary" @click="addYTZ">新增研讨组</el-button>
      <el-button type="danger">删除研讨组</el-button>
      <!-- 表格 -->
      <el-table :data="tableData" border style="width: 100%; margin-top: 30px; font-size: 18px">
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <!--<el-table-column type="index" label="序号" width="85" align="center"></el-table-column>-->
        <el-table-column prop="name" label="研讨组名称"></el-table-column>
        <el-table-column prop="md" label="研讨目的"></el-table-column>
        <el-table-column prop="ytxx" label="研讨xxx"></el-table-column>
        <el-table-column prop="cy" label="研讨组成员"></el-table-column>
        <el-table-column label="操作" width="230" align="center">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small" style="font-size: 16px">查 看</el-button>
            <el-button type="text" size="small" style="font-size: 16px">编 辑</el-button>
            <el-button type="text" size="small" style="font-size: 16px">删 除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div style="text-align: center; margin: 10px 0">
        <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 50, 100, 200]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400">
        </el-pagination>
      </div>
      <!-- 弹窗 -->
      <el-dialog
          title="新增研讨组"
          :visible.sync="dialogVisible"
          width="50%"
          @close="handleClose"
      >
        <!-- 内容 -->
        <el-form :inline="true" :model="formInline">
          <el-form-item label="组名">
            <el-input v-model="formInline.user" placeholder="组名" style="width: 230px"></el-input>
          </el-form-item>
          <el-form-item label="研讨目的">
            <el-input v-model="formInline.user" placeholder="研讨目的" style="width: 230px"></el-input>
          </el-form-item>
          <el-form-item label="xxxx">
          <el-input v-model="formInline.user" placeholder="xxxx" style="width: 230px"></el-input>
        </el-form-item>
        </el-form>
        <el-divider content-position="left">研讨组成员</el-divider>
        <el-table :data="tableUserData" border style="width: 100%;" >
          <el-table-column type="selection" width="55" align="center"></el-table-column>
          <el-table-column prop="id" label="ID" align="center"></el-table-column>
          <el-table-column prop="name" label="姓名" align="center"></el-table-column>
          <el-table-column prop="sex" label="性别" align="center"></el-table-column>
          <el-table-column prop="age" label="年龄" align="center"></el-table-column>
        </el-table>
        <!-- 按钮 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleYTZ">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      formInline: {
        name: '',
        md: '',
        ytxx: '',
        cy: ''
      },
      dialogVisible: false,
      currentPage: 1,
      tableData: [
        {name: '研讨组111', md: '研讨某方案111', ytxx: '12381274815614413', cy: '张三,李四,王五'},
        {name: '研讨组222', md: '研讨某方案222', ytxx: '12381274815614413', cy: '张三,李四,王五'},
        {name: '研讨组333', md: '研讨某方案333', ytxx: '12381274815614413', cy: '张三,李四,王五'},
        {name: '研讨组444', md: '研讨某方案444', ytxx: '12381274815614413', cy: '张三,李四,王五'},
        {name: '研讨组555', md: '研讨某方案555', ytxx: '12381274815614413', cy: '张三,李四,王五'},
        {name: '研讨组666', md: '研讨某方案666', ytxx: '12381274815614413', cy: '张三,李四,王五'},
        {name: '研讨组777', md: '研讨某方案777', ytxx: '12381274815614413', cy: '张三,李四,王五'},
      ],
      tableUserData: [
        {id: '1', name: '张三', sex: '男', age: '55'},
        {id: '1', name: '李四', sex: '男', age: '54'},
        {id: '1', name: '王五', sex: '女', age: '60'},
        {id: '1', name: '赵六', sex: '男', age: '45'},
      ]
    }
  },
  methods: {
    addYTZ() {
      this.dialogVisible = true
    },

    handleClose() {
      this.dialogVisible = false
    },
    handleYTZ() {
      this.dialogVisible = false
      this.$message.success('新增成功！')
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  },
}
</script>
<style lang="scss" scoped>
.container {
  position: relative;
  width: calc(100% - 40px);
  height: calc(100% - 50px);
  margin: 0 20px;
  overflow-y: auto;


}
</style>
